<template>
	<!-- 工作任务详情 -->
	<view class="playinfo-container">
		<view class="playinfo-head">
			<view class="head-1">走访村民</view>
			<view class="head-2">
				<view class="head-2-1">审核人</view>
				<view class="head-2-2">王照</view>
			</view>
			<view class="head-2">
				<view class="head-2-1">执行人</view>
				<view class="head-2-2">超级管理员</view>
			</view>
		</view>
		<view class="playinfo-head">
			阿卡卡开卡啊啦啦啦操， 阿老师啦啦啦啦啦是啦啦啦；阿上课说看看书看看书看看书
		</view>
		<view class="playinfo-content">
			<view class="playinfo-item">
				<view class="item-left">当前状态</view>
				<view class="item-right">正在进行</view>
			</view>
			<view class="playinfo-item">
				<view class="item-left">预计开始时间</view>
				<view class="item-right">2021-01-02 20:00:00</view>
			</view>
			<view class="playinfo-item">
				<view class="item-left">预计结束时间</view>
				<view class="item-right">2021-01-02 20:00:00</view>
			</view>
			<view class="playinfo-item">
				<view class="item-left">实际结束时间</view>
				<view class="item-right">2021-01-02 20:00:00</view>
			</view>
			<view class="playinfo-item">
				<view class="item-left">评分</view>
				<view class="item-right"></view>
			</view>
			<view class="playinfo-item">
				<view class="item-left">备注</view>
				<view class="item-right"></view>
			</view>
		</view>
		<view class="buzou-content">
			<u-time-line>
				<u-time-line-item  v-for="(item,index) in dislist" :key="index">
					<template>
						<view class="u-node" style="background: #19be6b;">
							<u-icon name="pushpin-fill" color="#fff" :size="24"></u-icon>
						</view>
					</template>
					<template v-slot:content>
						<view class="info">
							<view class="u-order-desc font" >
								<rich-text :nodes="item.disposeOpinion"></rich-text>
							</view>
							<view class="u-order-time mar">{{item.createTime}}</view>
						</view>
					</template>
				</u-time-line-item>
			</u-time-line>
		</view>
		
		<view class="playinfo-bottom">
			<view class="bottom1">工作总结</view>
			<view class="bottom1">工作完成</view>
			<view class="bottom1">申请延期</view>
			<view class="bottom1">终止任务</view>
		</view>
	</view>
</template>

<script>
	export default{
		data() {
			return{
				dislist:[
					{
						disposeOpinion:'<h3>一阶段</h3>',
						createTime:'2020-02-12'
					}
				]
			}
		}
	}
</script>

<style lang="scss" scoped>
	.playinfo-container{
		background-color: #f5f6f7;
		min-height: 100vh;
		padding: 20rpx;
		.playinfo-head{
			background-color: #fff;
			border-radius: 10rpx;
			padding: 20rpx;
			width: 100%;
			margin-bottom: 20rpx;
			color: #999;
			line-height: 30px;
			.head-1{
				color: #000;
				font-size: 30rpx;
				padding-bottom: 10rpx;
				border-bottom: 1px solid #999;
				width: 100%;
				text-align: left;
				margin-bottom: 20rpx;
			}
			.head-2{
				display: flex;
				justify-content: flex-start;
				align-items: center;
				font-size: 28rpx;
				margin: 10rpx 0;
				.head-2-1{
					width: 30%;
					color: #999;
				}
				.head-2-2{
					width: 70%;
					color: #333;
				}
			}
		}
		.playinfo-content{
			background-color: #fff;
			border-radius: 10rpx;
			padding: 20rpx;
			width: 100%;
			margin-bottom: 20rpx;
			.playinfo-item{
				border-bottom: 1px solid #f4f1f1;
				padding: 20rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 28rpx;
				.item-left{
					color: #333;
				}
				.item-right{
					color: #999;
				}
			}
		}
		.buzou-content{
			padding: 0 50rpx 120rpx 50rpx;
		}
		.playinfo-bottom{
			width: 100%;
			height: 120rpx;
			background-color: #fff;
			position: fixed;
			bottom: 0;
			left: 0;
			display: flex;
			justify-content: space-around;
			align-items: center;
			font-size: 28rpx;
			border-top: 1px solid #f4f1f1;
			.bottom1:nth-child(odd){
				background-color: #f4f1f1;
				color: #333;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 10rpx;
				width: 23%;
				height: 70rpx;
			}
			.bottom1:nth-child(even){
				background-color: #007AFF;
				color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 10rpx;
				width: 23%;
				height: 70rpx;
			}
		}
	}
</style>
